<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="../../../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../../../css/app.css" />
	<style type="text/css">
	   body{overflow-y: auto; background-color: #f4f4f4;}	
	   .mui-content{background-color: #f4f4f4;}
	   .mui-content .bill>h3{color: #666; height: .8rem; line-height: .8rem; background-color: #ffffff; font-size: .32rem; padding-left: .3rem; box-sizing: border-box; margin: 0;}
	   .mui-content .bill>.phone_number{background-color: #f4f4f4;}	
	   .bill .ico_card{display: inline-block; vertical-align: middle; margin:0 .1rem 0 0; width: .48rem; height: .48rem; background: url(../../../images/service/s_ico07.png) no-repeat; background-size:cover;}	
	   .mui-table-view-cell>span{position: absolute;top: 30%;right: 15px; display: inline-block; color: #333}
	   .mui-table-view{margin-top: .2rem; color: #999; font-size: .3rem;background:none;}
	   .mui-table-view-cell{background-color: #fff;}
	   .mui-table-view:before,.mui-table-view-cell:after,.mui-table-view:after{background:none;}
	   .month_bg{margin: .2rem 0;background-color:#e6edff;}
	   .water_bill .mix_money{font-size: .3rem; margin: .45rem 0; text-align: center;}  
	   .water_bill .mix_money>span{color: #ff7800;} 
	   button[type=button]{margin: .6rem .25rem; color: #fff; width:7rem; padding: .25rem 0px; background-color: #ff7800; font-size: .32rem; border: none;}
	   .ico_code{background: url(../../../images/service/s_ico06.png) no-repeat; display: inline-block; vertical-align: middle; width: .43rem; height: .43rem; background-size: cover; margin: 0px .1rem 0px 0px;}	   
	</style>
</head>
<div class="mui-content">
			<div class="bill water_bill">
			   <h3 class="bill_txt"><i class="ico_card"></i><span id="projectId"></span>缴纳</h3>		
			   <ul class="mui-table-view">
				    <li class="mui-table-view-cell">缴费户名
				        <span id="customerName"></span>
				    </li>
				    <li class="mui-table-view-cell">户号 
				        <span id="account"></span>
				    </li>
				    <li class="mui-table-view-cell">收费单位 
				        <span id='unitName'></span>
				    </li>
				    <li class="mui-table-view-cell">应缴金额
				        <span ><h4 id="payAmount"></h4> 元</span>
				    </li>
			   </ul>
			   <button id="payBillBtn" type="button" class="mui-btn mui-btn-block ripple"><i class="ico_code"></i>立即缴纳</button>
			</div>
		</div>	
	<body>
		<script type="text/javascript" src="../../../js/immersed.js" ></script>
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/common.js" ></script>
		<script type="text/javascript" src="../../../js/app.js" ></script>
		<script src="../../../js/payment.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			var projectJson = {
				c2670:'水费',
				c2680:'电费',
				c2681:"燃气费"
			}
			mui.plusReady(function () {
				var itemId = utils.getUrlParam("itemId");
				var account = utils.getUrlParam("account");
				var projectId = utils.getUrlParam("projectId");
				document.getElementById("projectId").innerText = projectJson[projectId]
				
			    //获取缴费信息
			    getAccountBill(itemId,account,projectId);
			    //生成订单并支付
			    document.getElementById("payBillBtn").addEventListener('tap',() => {
			    	var itemNum = document.getElementById("payAmount").innerText;
			    	if(!itemNum || !itemId || !account ){
			    		mui.toast("获取订单信息失败!");
			    		return
			    	}
			    	var url = "appHttpService/qianmi/createWaterCoalBill.do";
			    	var params = jsonToParams({
			    		itemId : itemId,
			    		itemNum : itemNum,
			    		rechargeAccount : account
			    	});
			    	utils.ajax(url,(data) => {
			    		data = JSON.parse(data);
			    		if(data.state == 1){
			    			var billId = data.billId;
							var subject = itemNum + projectJson[projectId] + "缴费";
							var subdesc = appName + '-' + subject;
							pay(itemNum,subject,subdesc,billId,function(){
								mui.alert("缴费成功!","提示",null,function(){
									plus.webview.getWebviewById("")&&plus.webview.getWebviewById("").close();
									plus.webview.currentWebview().hide("zoom-fade-out");
									plus.webview.currentWebview().close();
								},'div')
							});
			    		}else{
			    			mui.alert(data.msg ? data.msg : "生成订单失败",null,null,null,'div')
			    		}
			    	},params,{showWait:true})
			    })
			})
			var getAccountBill = function (itemId,account,projectId){
				var url = "appHttpService/qianmi/getWaterCoalAccountInfo.do?"+jsonToParams({
			    	projectId : projectId,
			    	itemId : itemId,
			    	account : account
			    });
			    utils.ajax(url,(data)=>{
			    	data = JSON.parse(data);
			    	if(data.state == 1){
			    		var info = JSON.parse(data.info);
			    		if(info.status == 1){//成功获取账户信息
			    			var waterCoalBill = info.waterCoalBills[0];
			    			var body = info.body;
			    			var params = info.params;
			    			//赋值 
			    			//收费单位
			    			unitName.innerText =  params.unitName;
			    			//户名
			    			customerName.innerText= waterCoalBill.customerName
			    			//户号
			    			document.getElementById("account").innerText = account;
			    			//金额
			    			document.getElementById("payAmount").innerText = waterCoalBill.payAmount;
			    			itemNum = waterCoalBill.payAmount;
			    		}else{
			    			mui.alert(info.message,null,null,function(){
				    			mui.back();
				    		},'div')
			    		}
			    	}else{
			    		mui.alert(data.msg ? data.msg : "查询用户信息失败",null,null,function(){
			    			mui.back();
			    		},'div')
			    	}
			    },null,{showWait:true})
			}
		</script>
	</body>

</html>